<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div class="b-b-d" style="padding: 20px 35px 15px">
        <div
          class="tips-area tips-icon"
          style="margin-bottom: 20px"
          :style="{
            backgroundImage: `url(${require('_a/userImages/' +
              (colorType == 0
                ? 'tips-icon'
                : colorType == 1
                ? 'tips-icon-g'
                : colorType == 2
                ? 'tips-icon-b'
                : 'tips-icon-p') +
              '@2x.png')})`,
          }"
        >
          温罄提示:请勿在出售页模板中添加不良信息，否则我司有权删除此出售页模板，请知悉!
        </div>
        <div class="pub-m-t-50">
          <h3 class="f-w-600 f-16 c-black" style="margin-bottom: 20px">
            出售页类型
          </h3>
          <RadioGroup v-model="rule">
            <Radio class="radio-mg-r-20" label="自定义出售页"></Radio>
            <Radio class="radio-mg-r-20" label="系统默认出售页"></Radio>
          </RadioGroup>
        </div>
      </div>
      <div class="b-b-d pub-m-t-20" style="padding: 14px 35px">
        <div>
          <h3 class="f-w-600 f-16 c-black" style="margin-bottom: 20px">
            出售页SEO信息
          </h3>
          <div class="flx-row-s-c mg-b-20">
            <div>
              <p class="list-title">网站标题</p>
              <p class="c-black">TITLE</p>
            </div>
            <Input
              v-model.trim="test"
              placeholder="输入25字以内网站标题"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-c mg-b-20">
            <div>
              <p class="list-title">网站关键词</p>
              <p class="c-black">KEY</p>
            </div>
            <Input
              v-model.trim="test"
              placeholder="输入3-5个关键词"
              style="width: 200px"
            />
            <span class="c-o f-14" style="margin-left: 10px"
              >（多个关键词请用逗号隔开）</span
            >
          </div>
          <div class="flx-row-s-c">
            <div>
              <p class="list-title">网站介绍</p>
              <p class="c-black">DESCRIPTION</p>
            </div>
            <Input
              v-model.trim="test"
              placeholder="输入80字以内的网站介绍"
              style="width: 200px"
            />
          </div>
        </div>
      </div>
      <div class="b-b-d pub-m-t-20" style="padding: 14px 35px">
        <div>
          <h3 class="f-w-600 f-16 c-black" style="margin-bottom: 20px">
            您的联系信息<span class="f-w-400 c-o"
              >（电话、电子邮箱、QQ、三者至少填—项）</span
            >
          </h3>
          <div class="flx-row-s-c mg-b-20">
            <span class="list-title">联系电话</span>
            <Input
              v-model.trim="test"
              placeholder="请输入"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-c mg-b-20">
            <span class="list-title">电子邮箱</span>
            <Input
              v-model.trim="test"
              placeholder="请输入"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-c mg-b-20">
            <span class="list-title">QQ</span>
            <Input
              v-model.trim="test"
              placeholder="请输入"
              style="width: 200px"
            />
          </div>
        </div>
      </div>

      <div class="flx-row-s-c pub-m-t-20">
        <div
          class="user-strong-button submit-button-style"
          style="margin-left: 145px; margin-right: 30px"
        >
          保存
        </div>
        <div class="user-normal-button submit-button-style">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
export default {
  name: "VipMydn",
  data() {
    return {
      breadCrumb: [{name: "管理中心"},{ name: "我是卖家" }, { name: "设置出售页面" }],
      tablist: [
        {
          name: "设置出售页面",
          to: "/user/bopsetting",
        },
      ],
      rule: "",
      test: "",
      colorType: 0,
    };
  },
  mounted() {
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list-title {
  width: 100px;

  margin-right: 17px;
  color: #000;
  font-size: 16px;

  &::after {
    content: ":";
  }
}
.mg-b-20 {
  margin-bottom: 20px;
}
</style>
